<style type="text/css">
.fullGrid .head { height: 50px; }
.fullGrid .ybar { margin-top: 50px; }
.fullGrid .th { height: 50px; }
.fullGrid .th .sizer { height: 50px; }
.fullGrid .th[group] { height: 25px; border-left: 0px; }
.fullGrid .foot .td { background-color: #CCCCCC; height: 32px; }
.fullGrid .icon { float: left; margin-top: 2px; }
.money { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
	var hd1 = $('<div class="tth"></div>');
	var hdt = $('<div style="height: 25px">'
		+ '<div class="title th" style="width: 100%">'
		+ '&nbsp;Account</div></div>').appendTo(hd1);
	var hdb = $('<div style="height: 25px"></div>').appendTo(hd1);
	var vw = $('.view');
	vw.mac('grid', {
		sortLocally: true,
		headerHeight: 48,
		cols : [{
			name: 'no', title : '&nbsp;', width: 20,
			render: function(r, tr){
				var a = $('<span class="icon icon-plus"></span>');
				a.click(function(){
					var yy = vw.find('.ybar>div');
					var pl = tr.exPanel;
					if(a.hasClass('icon-plus')){
						if(pl){
							pl.show();
						}else{
							pl = $('<ul style="background-color: #FFF; margin: 0px;"></ul>');
							//you can load remote content here
							pl.append('<li>' + r.subject + '</li><li>'
								+ r.summary + '</li><li>Debit = '
								+ r.debit + '</li><li>Credit = ' + r.credit + '</li>'
							);
							tr.exPanel = pl.insertAfter(tr);
							$('<div class="clear"></div>').insertBefore(pl);
						}
						yy.height(yy.height() + pl.height());
						a.removeClass('icon-plus').addClass('icon-minus');
					}else{
						pl.hide();
						yy.height(yy.height() - pl.height());
						a.removeClass('icon-minus').addClass('icon-plus');
					}
				});
				return a;
			}
		},{
			field: 'subject', title : 'Subject', width: 140,
		},{
			field: 'account', title : 'account', header: hd1,
			width: 162, isGroup: true
		},{
			field: 'debit', title : 'Debit', width: 80,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				if(r.debit)
					return '<div class="money">$'+r.debit + '</div>';
				return '';
			}
		},{
			field: 'credit', title : 'Credit', width: 80,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				if(r.credit)
					return '<div class="money">$'+r.credit + '</div>';
				return '';
			}
		},{
			field: 'summary', title : 'Summary', width: 200
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10
	});
});
</script>
<div class="viewPort demoPanel">
	<div class="view grid fullGrid"></div>
</div>